<template>
	<u-popup v-model="isContactListShow" mode="bottom" @click.stop="{}">
		<view class="contact-list">
			<view class="contact-list-top">
				<view class="top-title-container">
					<view class="close-button">

					</view>
					<strong>选择提醒的人</strong>
				</view>
				<u-search input-align="center" placeholder="搜索群成员" v-model="keyword" shape="square"
					:show-action="false" />
			</view>
			<scroll-view scroll-y :scroll-top="scroll" class="contact-list-main" @scroll="scrolltolower"
				:scroll-into-view="`anchor${currentIndex}`">
				<u-index-list :scrollTop="scrollTop" :sticky='false' :index-list="indexList" @select="select">
					<view v-for="(item,key,index) in groupMembers" :key="key">
						<u-index-anchor :index="key" :id="'anchor'+key"
							v-if="keyword.length == 0||$utils.makePy(keyword)[0] == key" />
						<view class="member-item" v-for="member in groupMembers[key]" :key="member.uuid"
							v-if="member.nickname.indexOf(keyword) != -1" @click="selectRemindUser(member)">
							<view class="member-avatar-container">
								<u-image :src="member.avatars" width="78" height="78" border-radius="10" />
							</view>
							<view class="member-info-container">
								{{member.nickname}}
							</view>
						</view>
					</view>
				</u-index-list>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			isContactListShow: Boolean,
			sessionInfo: {
				type: Object,
				require: true
			},
			memberList: {
				type: Array,
				require: true
			}
		},
		watch: {
			isContactListShow: {
				handler(val) {
					console.log(val)
					this.$emit('update:isContactListShow', val);
				},
				immediate: true
			},
			memberList: {
				handler(val) {
					this.getGroupMembers();
				}
			}
		},
		data() {
			return {
				// show: true,
				groupMembers: {},
				keyword: '',
				scrollTop: 0,
				scroll: 0,
				indexList: [],
				currentIndex: '',
			}
		},
		methods: {
			getGroupMembers() {
				this.memberList.forEach(item => {
					const first_letter = this.$utils.makePy(item.nickname)[0];
					console.log('首字母缩写', first_letter)
					if (!this.$utils.isLetter(first_letter)) {
						this.groupMembers['#'] ? this.groupMembers['#'].push(item) : this.groupMembers['#'] = [
							item
						];
					} else {
						this.groupMembers[first_letter] ? this.groupMembers[first_letter].push(item) : this
							.groupMembers[first_letter] = [item];
					}
				})
				this.groupMembers = this.$utils.arrangementByalphabet(this.groupMembers)
				this.indexList = Object.keys(this.groupMembers)
				this.$nextTick(() => {
					this.scroll = 2;
				})
			},
			scrolltolower(e) {
				// console.log(e)
				this.scrollTop = e.target.scrollTop;
				// console.log(this.scrollTop)
			},
			select(e) {
				console.log(e)
				// this.scrollTop = parseInt(e);
				// console.log(this.scrollTop)
				this.currentIndex = e;
			},
			selectRemindUser(user) {
				console.log("1")
				this.$emit('update:isContactListShow', false);
				uni.$emit('selectRemindUser', user.nickname);
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./contactList.scss";
</style>
